<template>
	<!--component/treechart.wxml-->
	<view class="tree-container">
		<view class="user-super-container">
			<view class="rowText" v-if="dataSource.isNull != 1 && dataSource.left">
				<view class="rowText_top">
					【
					<text style="color: #ff4c5a">{{ numToChinese(dataSource.layer) }}世</text>
					】辈
				</view>
				<view class="rowText_bottom">
					男{{ dataSource.genderNum?.male }}女{{ dataSource.genderNum?.female }}
				</view>
			</view>
			<!-- 画当前节点 -->
			<view class="user-partner-container">
				<!-- 有妻子 有儿子的情况下 给当前节点添加22.5rpx的右侧内边距-->
				<view
					class="user-container"
					:style="{
						paddingRight: dataSource.partner && dataSource.children ? '22.5rpx' : '0'
					}"
				>
					<!-- 每个子节点头部画一个垂直的线  根节点除外 -->
					<view v-if="!isRoot" class="vertical-line" />
					<!-- 用户信息 -->
					<view class="user-info" data-item="dataSource" @click="clickFamily(dataSource)">
						<image
							v-if="dataSource.gender == 2"
							class="user_bgc"
							src="http://112.124.50.179:8888/imgs/home/clanbg_female.png"
							mode=""
						/>
						<image
							v-else
							class="user_bgc"
							src="http://112.124.50.179:8888/imgs/home/clanbg_male.png"
							mode=""
						/>

						<image
							v-if="dataSource.gender == 2"
							class="user-avatar"
							:src="
								dataSource.headUrl ||
								'http://112.124.50.179:8888/imgs/home/tx_female.png'
							"
							mode=""
						></image>
						<image
							v-else
							class="user-avatar"
							:src="
								dataSource.headUrl ||
								'http://112.124.50.179:8888/imgs/home/tx_male.png'
							"
							mode=""
						></image>

						<view class="user-name">
							<view
								:class="[
									'user-name-text',
									dataSource.gender == 2 ? 'user-girl' : 'user-boy'
								]"
							>
								{{ dataSource.name }}
							</view>
						</view>
					</view>

					<!-- 如果当前节点有儿子 有妻子 在节点下方画一条垂直的线 -->
					<view v-if="dataSource.children && dataSource.partner" class="vertical-line" />
				</view>

				<!-- 处理配偶 -->
				<!-- 如果有配偶 没儿子  则画一根水平线关联夫妻关系 -->
				<view
					v-if="!dataSource.children && dataSource.partner"
					class="horizontal-line"
					style="width: 35rpx; margin-left: 5rpx; margin-right: 5rpx"
				/>

				<!-- 有妻子 没有儿子的情况下 给当前配偶节点添加22.5rpx的左侧内边距-->
				<view
					v-for="(item, index) in dataSource.partner"
					class="user-container"
					:style="{
						paddingLeft: dataSource.partner && dataSource.children ? '22.5rpx' : '0',
						paddingRight: index != dataSource.partner.length - 1 ? '22.5rpx' : '0'
					}"
				>
					<!-- 每个子节点头部画一个垂直的线 由于是配偶  要透明处理 -->
					<view class="vertical-line" style="background-color: rgba(0, 0, 0, 0)" />
					<view class="user-info" @click="clickFamily(item)" data-item="dataSource">
						<image
							v-if="item.gender == 2"
							class="user_bgc"
							src="http://112.124.50.179:8888/imgs/home/clanbg_female.png"
							mode=""
						/>
						<image
							v-else
							class="user_bgc"
							src="http://112.124.50.179:8888/imgs/home/clanbg_male.png"
							mode=""
						/>
						<image
							v-if="item.gender == 2"
							class="user-avatar"
							:src="
								item.headUrl || 'http://112.124.50.179:8888/imgs/home/tx_female.png'
							"
							mode=""
						></image>
						<image
							v-else
							class="user-avatar"
							:src="
								item.headUrl || 'http://112.124.50.179:8888/imgs/home/tx_male.png'
							"
							mode=""
						></image>
						<view class="user-name">
							<view
								:class="[
									'user-name-text',
									item.gender == 2 ? 'user-girl' : 'user-boy'
								]"
							>
								{{ item.name }}
							</view>
						</view>
					</view>

					<!-- 如果当前节点有儿子 在配偶下方画一条垂直的线 -->
					<view v-if="dataSource.children" class="vertical-line" />
				</view>
			</view>
			<!-- 如果当前节点有儿子并且有配偶 在夫妻下方画一条水平的线 并设置左下 右下圆角 -->
			<view
				v-if="dataSource.children && dataSource.partner"
				class="horizontal-line left-bottom-radius right-bottom-radius"
			/>
		</view>

		<!-- 有多个儿子 先要画一条垂直的线 再画一条水平的线 -->
		<view v-if="dataSource.children?.length > 1" class="vertical-line" />

		<!-- 渲染子节点 如果他的下级最后一个子节点有配偶 则下级的整个布局向右移动144rpx -->
		<view
			v-if="dataSource.children"
			class="children-container"
			:style="{
				marginLeft: dataSource.children[dataSource.children?.length - 1].partner
					? `calc(144rpx * ${
							dataSource.children[dataSource.children?.length - 1].partner.length
					  })`
					: '0'
			}"
		>
			<block v-for="(item, index) in dataSource.children" :key="key">
				<view class="children-super">
					<block v-if="dataSource.children?.length > 1">
						<!-- 第一个的情况 -->
						<view
							v-if="index == 0"
							:class="[
								'horizontal-line',
								'left-top-radius',
								item.partner ? 'first-partner-line' : 'first-line'
							]"
						/>
						<!-- 最后一个 -->
						<view
							v-else-if="index == dataSource.children?.length - 1"
							:class="[
								'horizontal-line',
								'right-top-radius',
								item.partner ? 'last-partner-line' : 'last-line'
							]"
						/>
						<!-- 中间的 -->
						<view v-else class="horizontal-line" style="width: 100%" />
					</block>
					<treeChild
						:dataSource="item"
						@clickFamily="clickFamily"
						:genderNum="genderNum"
					/>
				</view>
			</block>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, watchEffect } from 'vue';
import treeChild from '@/components/familyTree/wx/treeChild.vue';

const props = defineProps({
	dataSource: {
		type: Object,
		default: {},
		required: true
	}
});
const emits = defineEmits(['clickFamily']);
const dataSource = ref();

watchEffect(() => {
	dataSource.value = props.dataSource;
});

const clickFamily = (data) => {
	emits('clickFamily', data);
};

//数字换成中文
const numToChinese = (num) => {
	const numChars = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
	const posChars = ['', '十', '百', '千'];
	const sectionChars = ['', '万', '亿', '万亿'];

	if (num === 0) {
		return '零';
	}

	let str = '';
	let sectionIndex = 0;
	while (num > 0) {
		let section = num % 10000;
		if (section !== 0) {
			let sectionStr = '';
			let unit = 0;
			while (section > 0) {
				let digit = section % 10;
				if (digit !== 0) {
					sectionStr = numChars[digit] + posChars[unit] + sectionStr;
				} else if (!sectionStr.startsWith('零')) {
					sectionStr = '零' + sectionStr;
				}
				section = Math.floor(section / 10);
				unit++;
			}
			str = sectionStr + sectionChars[sectionIndex] + str;
		}
		sectionIndex++;
		num = Math.floor(num / 10000);
	}
	return str;
};
</script>

<style lang="scss" scoped>

.tree-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.user-super-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.rowText {
	position: absolute;
	left: -170rpx;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	flex-direction: column;

	.rowText_top {
		font-weight: 500;
		font-size: 26rpx;
		color: #333333;
		line-height: 36rpx;
	}

	.rowText_bottom {
		font-weight: 400;
		font-size: 22rpx;
		color: #666666;
		line-height: 26rpx;
	}
}

.user-partner-container {
	display: flex;
	align-items: center;
	padding-left: 22.5rpx;
	padding-right: 22.5rpx;
}

.user-container {
	width: 96rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.user-info {
	overflow: hidden;
	position: relative;
	width: 116rpx;
	height: 264rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.user_bgc {
	width: 116rpx;
	height: 264rpx;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}

.user-avatar {
	margin-top: 24rpx;
	height: 80rpx;
	width: 80rpx;
	display: block;
	border-radius: 50%;
}

.user-name {
	flex: 1;
	width: 100%;
	text-align: center;
	margin: 5rpx 0 10rpx;
	display: flex;
	align-content: center;
	justify-content: center;
}

.user-girl {
	color: #e57ba9;
}

.user-boy {
	color: #13acfc;
}

.user-name-text {
	width: 40rpx;
	font-weight: 500;
	font-size: 28rpx;
	line-height: 40rpx;
	writing-mode: vertical-lr;
}

.user-sex {
	height: 12rpx;
	width: 14rpx;
}

.user-self {
	color: white;
}

.vertical-line {
	height: 25rpx;
	width: 4rpx;
	background-color: #84785b;
}

.horizontal-line {
	width: calc(100% - 138rpx);
	height: 4rpx;
	background-color: #84785b;
}

.left-bottom-radius {
	border-bottom-left-radius: 2rpx;
}

.right-bottom-radius {
	border-bottom-right-radius: 2rpx;
}

.left-top-radius {
	border-top-left-radius: 2rpx;
}

.right-top-radius {
	border-top-right-radius: 2rpx;
}

.children-container {
	display: flex;
	flex-direction: row;
}

.children-super {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.first-partner-line {
	width: calc(50% + 22.5rpx + 50rpx);
	margin-left: calc(50% - 22.5rpx - 50rpx);
}

.first-line {
	width: calc(50% + 2rpx);
	margin-left: calc(50% - 2rpx);
}

.last-partner-line {
	width: calc(50% - 22.5rpx - 46rpx);
	margin-right: calc(50% + 22.5rpx + 46rpx);
}

.last-line {
	width: calc(50% + 2rpx);
	margin-right: calc(50% - 2rpx);
}

.placeholder-view {
	width: 125rpx;
	background-color: white;
}
</style>
